<template>
  <view class="shop-list-container">
    <view class="header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="left" size="24" color="#333"></uni-icons>
      </view>
      <text class="title">附近店铺</text>
    </view>
    
    <view class="shop-list">
      <view class="shop-item" v-for="(shop, index) in shops" :key="index" @click="goToShopDetail(shop)">
        <image :src="shop.imgUrl" mode="aspectFill"></image>
        <view class="shop-info">
          <text class="shop-name">{{shop.name}}</text>
          <view class="shop-data">
            <text>月售：{{shop.sales}}</text>
            <text>起送：{{shop.expressLimit}}</text>
            <text>基础运费：{{shop.expressPrice}}</text>
          </view>
          <text class="shop-slogan" :style="{color: shop.sloganColor || '#ff6b6b'}">{{shop.slogan}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shops: []
    }
  },
  onLoad() {
    this.fetchShops()
  },
  methods: {
    fetchShops() {
      uni.request({
        url: 'http://localhost:3000/hotList', 
        success: (res) => {
          console.log('获取店铺数据成功:', res.data)
          if (res.statusCode === 200) {
            this.shops = res.data
          }
        },
        fail: (err) => {
          console.error('获取店铺数据失败:', err)
          uni.showToast({
            title: '获取店铺数据失败',
            icon: 'none'
          })
        }
      })
    },
    goBack() {
      uni.navigateBack()
    },
    goToShopDetail(shop) {
      console.log('点击店铺:', shop)
      uni.navigateTo({
        url: `/pages/shop/shop-detail?id=${shop._id}&name=${encodeURIComponent(shop.name)}`,
        success: () => {
          console.log('导航成功')
        },
        fail: (err) => {
          console.error('导航失败:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.shop-list-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .back-btn {
    position: absolute;
    left: 20rpx;
  }
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.shop-list {
  padding: 20rpx;
  
  .shop-item {
    display: flex;
    padding: 20rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    
    image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
    
    .shop-info {
      flex: 1;
      
      .shop-name {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .shop-data {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10rpx;
        
        text {
          font-size: 24rpx;
          color: #666;
          margin-right: 20rpx;
        }
      }
      
      .shop-slogan {
        font-size: 24rpx;
      }
    }
  }
}
</style>